<template>
	<view class="addressBox">
		<view class="formBox">
			<u-form :model="form" ref="uForm" label-width="80">
				<u-form-item label="联系人" prop="name">
					<u-input v-model="FormData.name" placeholder="请填写联系人姓名" border="none" placeholder-style="color: #ccc;font-size: 24rpx;"/>
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="FormData.phone" type="number" maxlength="11" placeholder="请填写收货人手机号" border="none" placeholder-style="color: #ccc;font-size: 24rpx;"/>
				</u-form-item>
				<u-form-item label="所在地区">
					<uni-data-picker :localdata="addressList" :style="{flex:1,border: none}" placeholder="省市区县, 乡镇等" popup-title="请选择地区"
						@change="onchange" @nodeclick="onnodeclick" :map="{text:'areaName',value:'areaId'}" v-model="region">
					</uni-data-picker>
				</u-form-item>
				<u-form-item label="详细地址" prop="detailedAddress">
					<u-input v-model="FormData.detailedAddress" placeholder="街道、楼牌号等" border="none" placeholder-style="color: #ccc;font-size: 24rpx;"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="formBox flex fjb alignC">
			<view>
				设为默认地址
			</view>
			<view>
				<u-switch v-model="FormData.isDefault" activeColor="#00B4C7" activeValue="0" inactiveValue="1" size="20"></u-switch>
			</view>
		</view>
		<view class="foot_box" style="background: #f5f5f5;">
			<view class="large_btn btn_primary" @click="formSubmit">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getAreaApi,
		addAddressApi,
		getAddressDetailApi
	} from '../../common/API/addressApi.js'
	export default {
		data() {
			return {
				addressList: [],
				address: [],
				FormData: {
					id: '',
					name: '',
					phone: '',
					memberCode: '',
					detailedAddress: '',
					isDefault: 1,
					province: '',
					provinceCode: 0,
					city: '',
					cityCode: 0,
					district: '',
					districtCode: 0,
				},
				region: 0
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		async onLoad(option) {
			this.addressList = JSON.parse(uni.getStorageSync('addressList') || '[]')
			if (!this.addressList.length) {
				this.getArea()
			}
			if (option.addressId) {
				//编辑地址
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				this.FormData.id = option.addressId
				const res = await getAddressDetailApi(option.addressId)
				this.FormData = res.data
				this.region = +this.FormData.districtCode
			} else {
				this.FormData.memberCode = this.ylUserInfo.username
			}
		},
		methods: {
			async getArea() {
				const res = await getAreaApi()
				this.addressList = res.data
				uni.setStorageSync('addressList', JSON.stringify(res.data))
			},
			onnodeclick() {},
			onchange(data) {
				this.address = data.detail.value
			},
			handleAddress() {
				this.address.forEach((item, index) => {
					if (index === 0) {
						this.FormData.province = item.text
						this.FormData.provinceCode = item.value
					} else if (index === 1) {
						this.FormData.city = item.text
						this.FormData.cityCode = item.value
					} else if (index === 2) {
						this.FormData.district = item.text
						this.FormData.districtCode = item.value
					}
				})
			},
			// 保存地址信息
			async formSubmit() {
				if (!this.FormData.name) return uni.$showMsg('请填写姓名')
				if (!this.region) return uni.$showMsg('请选择省市区')
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!reg_tel.test(this.FormData.phone)) {
					return uni.$showMsg('请输入正确手机号')
				}
				if (!this.FormData.detailedAddress.trim().length) {
					return uni.$showMsg('请填写详情地址')
				}
				this.handleAddress()
				const res = await addAddressApi(this.FormData)
				if (res.status === 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
					})
					uni.navigateBack()
				}
			},
		}
	}
</script>


<style scoped lang="scss">
	.addressBox {
		width: 94%;
		margin: 20rpx auto;

		.formBox {
			background: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			/deep/ .u-form-item {
				font-size: 20rpx !important;
				border-bottom: 1rpx solid #f2f2f2;
				.u-form-item__body__left__content__label{
					font-size: 26rpx;
				}
				.input-value-border{
					border: none;
					padding: 0;
				}
				.u-input__content__field-wrapper__field{
					font-size: 26rpx !important;
				}
			}
		}
	}
</style>